<template>
  <div style="width:100%;height:100vh" ref="chart" id="main"></div>
</template>

<script>
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GlobeComponent } from 'echarts-gl/components';

echarts.use([GlobeComponent, CanvasRenderer]);

export default {
  name: "earth",
  data() {
    return {
      ROOT_PATH: 'https://echarts.apache.org/examples',
      myChart: {},
      option: {}
    }
  },
  methods: {

  },
  mounted() {
   this.myChart=echarts.init(document.getElementById('main'))
    this.option = {
      backgroundColor: '#000',
      globe: {
        baseTexture: '/abc/examples/data-gl/asset/earth.jpg',
        shading: 'lambert',
        environment: '/abc/examples/data-gl/asset/starfield.jpg',
        atmosphere: {
          show: true
        },
        light: {
          ambient: {
            intensity: 0.1
          },
          main: {
            intensity: 1.5
          }
        }
      },
      series: []
    };
    this.myChart.setOption(this.option);
  }
}
</script>

<style scoped>

</style>